<table class="table table-hover">
  <thead>
  <tr>
    <th>Name</th>
    <th>Last Modified</th>
    <th>Size</th>
    <th>Permission</th>
    <th>Owner</th>
    <th>Group</th>
  </tr>
  </thead>
  <tbody class="border-top-0">
  <tr *ngFor="let file of items" (dblclick)="openItem(file)" (click)="selectItem(file, keyModifiers($event))"
      [class.table-active]="selectedItems && selectedItems.includes(file)">
    <td class="text-nowrap">
          <span class="pe-2" [ngSwitch]="file.type">
              <i class="bi-folder-fill" *ngSwitchCase="'d'"></i>
              <i class="bi-file-earmark-fill" *ngSwitchCase="'-'"></i>
              <i class="bi-gear-fill" *ngSwitchCase="'c'"></i>
              <i class="bi-gear-fill" *ngSwitchCase="'b'"></i>
              <i class="bi-gear-fill" *ngSwitchCase="'f'"></i>
              <i class="bi-gear-fill" *ngSwitchCase="'s'"></i>
              <i class="bi-link" *ngSwitchCase="'l'"></i>
              <i class="bi-file-earmark-x-fill" *ngSwitchDefault></i>
            </span>
      <span>{{ file.filename }}</span>
      <ng-container *ngIf="file.link as link">
        <i class="bi-arrow-right-short text-secondary px-1"></i>
        <span class="text-secondary" [class.text-decoration-line-through]="link.broken">{{ link.target ?? '?' }}</span>
      </ng-container>
    </td>
    <td class="text-nowrap">{{ file.mtime * 1000 | date:'short' }}
    </td>
    <td class="text-nowrap">
          <span *ngIf="file.type === '-'; else nonRegular">
            {{ file.size | filesize:sizeOptions }}
          </span>
      <ng-template #nonRegular>-</ng-template>
    </td>
    <td class="text-nowrap font-monospace">{{ file.mode }}</td>
    <td class="text-nowrap">
      <ng-container *ngIf="file.user else unknownValue">{{ file.user }}</ng-container>
    </td>
    <td class="text-nowrap">
      <ng-container *ngIf="file.group else unknownValue">{{ file.group }}</ng-container>
    </td>
  </tr>
  </tbody>
</table>
<ng-template #unknownValue>-</ng-template>
